<template>
    <div id="v-center-top">
        <el-row :gutter="8" class="e-row-r" type="flex" justify="space-between">
            
            <!-- <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="mb20-u">
                <div class="e-row-d">

                    <el-carousel v-if="isCarousel" indicator-position="outside" :autoplay="false" :loop="false">
                        <el-carousel-item v-for="items in turnPag" :key="items">
                            <ul class="e-row-u">
                                <li v-for="(item,index) in liLIst" :key="item.id">
                                    <div @click="iconClick(item.Stream)" class="e-row-u-d">
                                        <div class="bj-c">
                                            <img :src="item.isVideoImg">
                                        </div>
                                        <img class="e-row-bj" :src="item.bjImg" />
                                    </div>
                                </li>
                            </ul>
                        </el-carousel-item>
                    </el-carousel>

                    <ul v-else class="e-row-u">
                        <li v-for="(item,index) in liLIst" :key="item.id">
                            <div @click="iconClick(item.Stream)" class="e-row-u-d">
                                <div class="bj-c">
                                    <img :src="item.isVideoImg">
                                </div>
                                <img class="e-row-bj" :src="item.bjImg" />
                            </div>
                        </li>
                    </ul>

                </div>
            </el-col> -->

            <el-col :xs="24" :sm="24" :md="24" :lg="13" :xl="13" class="mb20-u">
                <div class="e-row-d video-s">
                    <div class="video-img" style="width: 100%;height: 100%; display: flex;justify-content: center; align-items: center;">
                        <p>暂无视频资源</p>
                    </div>
                    <!-- <img src="../../image/sp.jpg" style="display: block;width: 100%;height: 100%;" /> -->
                    <!-- <video style="width: 100%;height: 100%;" class="video-con" controls preload="auto">
                        <source :src="fileSrc" type="video/mp4">
                    </video> -->
                </div>
            </el-col>

            <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11" class="mb20-u">
                <div class="e-row-d scroll-v">
                    <div class="scroll" style="background: transparent;">
                        <table class="table-1">
                            <tr>
                                <th class="td-1">序号</th>
                                <th class="td-2">名称</th>
                                <th class="td-3">位置</th>
                            </tr>
                        </table>
                        <list-scroll-top v-if="dataList.length !== 0" class="box" :speed="0.3">
                            <div class="list">
                                <div class="item-s" v-for="item in dataList" :key="item.id">
                                    <div class="item-s-c td-1"> {{ item.id }} </div>
                                    <div class="item-s-c td-2"> {{ item.name }} </div>
                                    <div class="item-s-c td-3"> {{ item.location }} </div>
                                </div>
                            </div>
                        </list-scroll-top>
                        <div v-else style="width: 100%; text-align: center;padding: 20px 0;color: #A3A6AD; background-color: transparent;">暂无数据</div>
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw , nextTick } from 'vue';
import Video2 from '../../../image/Video-2.png';
import Video4 from '../../../image/Video-4.png';
import riskBg from '../../../image/video_cover.jpg';
import ListScrollTop from "./components/listScrollTop.vue";
export default defineComponent({
    name:'v-center-t',
    components: {
        ListScrollTop,
    },
    setup(props){
        const fileSrc = ref();
        const isCarousel = ref(false);
        const liLIst = ref();
        const turnPag = ref(0);
        /*** GetVideoUrl 获取摄像头视频流地址 */
        const GetVideoUrl = () => {
                liLIst.value = [];
                let res: any = [
                    // {Name: '办公区',Stream: "http://183.239.186.195:8080/rtp/34020000002000009001_31017000001320009001.live.mp4"},
                ];
                if(res.length !== 0){
                    let numStr = 8
                    if(res.length < numStr){
                        isCarousel.value = false
                        for(let i=0; i<numStr; i++){
                            let videoObj: any = {}
                            if(res[i]){
                                videoObj.id = i + 1
                                videoObj.Name = res[i].Name
                                videoObj.Stream = res[i].Stream
                                videoObj.bjImg = riskBg
                                videoObj.isVideoImg = Video2
                            }else{
                                videoObj.id = i + 1
                                videoObj.Name = ''
                                videoObj.Stream = ''
                                videoObj.bjImg = riskBg
                                videoObj.isVideoImg = Video4
                            }
                            liLIst.value.push(videoObj)
                        }
                    }else{
                        isCarousel.value = true
                        turnPag.value = Math.floor(res.length / 8)
                        for(let i=0; i<res.length; i++){
                            let videoObj: any = {}
                            videoObj.id = i + 1
                            videoObj.Name = ''
                            videoObj.Stream = ''
                            videoObj.bjImg = riskBg
                            liLIst.value.push(videoObj)
                        }
                    }
                }else{
                    isCarousel.value = false
                    for(let i=0; i<8; i++){
                        let videoObj: any = {}
                        videoObj.id = i + 1
                        videoObj.Name = ''
                        videoObj.Stream = ''
                        videoObj.bjImg = Video4
                        liLIst.value.push(videoObj)
                    }
                }
            }
            /*** 点击播放视频 */
            const iconClick = (val: any) => {
                fileSrc.value = "";
                fileSrc.value = val;
            }
            onMounted(() => {
                nextTick(() => {
                    // fileSrc.value = "http://183.239.186.195:8080/rtp/34020000002000009001_31017000001320009001.live.mp4";
                    // GetVideoUrl();
                })
            })
            return {
                liLIst,
                dataList: [
                    // {id:'1',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'2',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'3',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'4',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'5',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'6',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'7',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'8',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'9',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'10',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'11',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'12',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'13',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'14',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                    // {id:'15',name:'豪鹏三楼2号位相机',location:'豪鹏三楼'},
                ],
                isCarousel,
                turnPag,
                fileSrc,
                iconClick,
            }
    }
})
</script>
<style lang="scss" scoped>
:deep(.el-carousel__indicators--outside){
    display: none;
}
:deep(.el-carousel__container){
    height: 14vh;
}
:deep(.el-carousel__arrow:hover){
    background: rgba(31, 45, 61, 1);
}
:deep(.el-carousel__arrow){
    background: rgba(31, 45, 61, 1);
    height: 20px;
    width: 20px;
}
:deep(.el-carousel__arrow--left){
    left: 5px;
}
:deep(.el-carousel__arrow--right){
    right: 5px;
}
#v-center-top{
    position: relative;
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    display: table;
    width: 100%;
    height: 100%;
    .e-row-r{
        position: absolute;
        bottom: 16px;
        left: 0;
        width: 100%;
        // display: table-cell;
        padding: 0px 10px;
        // vertical-align: middle;
        .mb20-u{
            // padding-top: 3vh;
            .scroll-v{
                overflow: hidden;
            }
            .video-s{
                border: 1px solid rgb(21,136,189);
                background: rgba(10, 10, 10, 0.5);
                .video-img{
                    background-image: url('../../image/sp.jpg');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 100% 100%;
                }
            }
            .e-row-d{
                height: 14vh;
                .video-box{
                    width: 100%;
                    height: 100%;
                }
                .e-row-u{
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    height: 100%;
                    li{
                        width: 18%;
                        span{
                            display: block;
                            text-align: center;
                            height: 20px;
                            line-height: 20px;
                        }
                        .e-row-u-d{
                            width: 100%;
                            position: relative;
                            cursor:pointer;
                            .bj-c{
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                // background: rgba(21,136,189,0.3);
                                display: flex;
                                align-items: flex-end;
                                align-content: flex-end;
                                img{
                                    display: block;
                                    width: 80%;
                                    height: 80%;
                                    opacity: 0.7;
                                    margin: auto;
                                }
                            }

                            .e-row-bj{
                                display: block; 
                                width: 100%; 
                                height: 100%;
                                opacity: 0;
                            }
                        }
                    }
                }
                .scroll{
                    background: rgba(19,44,104,0.4);
                }
                .table-1{
                    position: relative;
                    width: 100%;
                    text-align: center;
                    background: rgba(14 , 54 , 110 , 1);
                    z-index: 1;
                    th{
                        text-align: center;
                    }
                }
                .td-1{width: 20%;}
                .td-2{width: 50%;}
                .td-3{width: 30%;}
                .td-1,.td-2,.td-3{
                    height: 30px;
                    line-height: 30px;
                }
                .box {
                    height: 300px;
                    .list {
                        width: 100%;
                        .item-s {
                            display: flex;
                            justify-content: space-between;
                            cursor: pointer;
                            &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
                            color: rgb(21,136,170);
                            table-layout:fixed;
                            .item-s-c{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>